<template>
<!--  <div class="header-container" style="height: 1vh; padding: 5px 5px;background-color: #fff;">-->
<!--  </div>-->

  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="flex flex-wrap gap-4 items-center">
          当前停车场：
          <el-select
              v-model="value"
              placeholder="Select"
              size="large"
              style="width: 150px"
          >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                filterable
            />
          </el-select>
          {{ formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss') }}
        </div>
      </el-header>
      <el-main>
        <el-row :gutter="30">
          <el-col :span="2"></el-col>
          <el-col :span="5">
            <div class="common-layout">
              <el-container>
                <el-header>已收费用: {{ charged }}</el-header>
              </el-container>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="common-layout">
              <el-container>
                <el-header>待收费用: {{ pendingFees }}</el-header>
              </el-container>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="common-layout">
              <el-container>
                <el-header>已用车位: {{ usedSlots }}</el-header>
              </el-container>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="common-layout">
              <el-container>
                <el-header>空闲车位: {{ freeSlots }}</el-header>
              </el-container>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="4"></el-col>
          <el-col :span="18">
            车流量与收入统计图
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="2"></el-col>
          <el-col :span="20">
            <div id="incomeChart" class="chart-container"></div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import {ElMessage} from "element-plus";
import axios from 'axios';

// 定义后端API接口路径
const API_URL = import.meta.env.VITE_API_BASE_URL

const charged = ref(0); // 已收费用
const pendingFees = ref(0); // 待收费用
const usedSlots = ref(0); // 已用车位
const freeSlots = ref(0); // 空闲车位

const formatDate = (date, format) => {
  const map = {
    'y': date.getFullYear(),
    'M': date.getMonth() + 1,
    'd': date.getDate(),
    'h': date.getHours(),
    'm': date.getMinutes(),
    's': date.getSeconds()
  };
  return format.replace(/(y+|M+|d+|h+|m+|s+)/g, (match) => {
    const padding = '00';
    const value = map[match[0]];
    return padding.substring(0, padding.length - value.toString().length) + value;
  });
};

const value = ref('请选择停车场');
const options = [
];
//停车场数组
const parkinglots = ref([]);
const getParkinglots = ()=>{
  axios.get(API_URL+'/v1/parklot/list')
      .then((response)=>{//回调函数,服务器响应后执行此处代码
        /*response是响应对象,我们可以从response.data中获取服务器给的响应数据*/
        //console.log("response");
        console.log(response.data);//{code:2000,msg:'OK',data:null}
        //根据状态码判断是否获取停车场列表成功,进行不同的处理
        if(response.data.code===2000){/*获取停车场列表成功*/
          parkinglots.value = response.data.data;
          console.log(parkinglots.value);
          //将停车场数组赋值到options数组中
          options.splice(0,options.length);
          for(let i=0;i<parkinglots.value.length;i++){
            options.push({value:parkinglots.value[i].id,label:parkinglots.value[i].name});
            console.log(options);
          }
        }else{/*获取停车场列表失败*/
          ElMessage.error(response.data.msg);
        }
      })
}
onMounted(() => {
  getParkinglots();
  const chartContainer = document.getElementById('incomeChart');
  const myChart = echarts.init(chartContainer);

  window.addEventListener('resize', () => {
    myChart.resize();
  });

  const option = {
    xAxis: {
      type: 'category',
      data: ['0：00-6：00', '6：00-12：00', '12：00-18：00', '18：00-24：00']
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        name: '2015',
        data: [89.3, 92.1, 94.4, 85.4]
      },
      {
        type: 'bar',
        name: '2016',
        data: [95.8, 89.4, 91.2, 76.9]
      },
      {
        type: 'bar',
        name: '2017',
        data: [97.7, 83.1, 92.5, 78.1]
      }
    ]
  };

  option && myChart.setOption(option);
});
</script>

<style scoped>
.header-container {
  height: 1vh;
  padding: 10px 5px;
  background-color: #fff;
}

.chart-container {
  width: 100%;
  height: 400px;
}
</style>
